<!-- 
    create by 2021-1-4 全屏播放互动课件页面
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>互动视频播放</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./font/indexFont/iconfont.css">
    <style>
        /* 视频播放器的自定义样式 */
        div,
        video,
        p,
        source {
            user-select: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        #player {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        video {
            width: 100%;
            height: 100%;
            background-color: #000000;
            object-fit: fill;
            cursor: pointer;
            vertical-align: middle;
        }

        #videoControls {
            padding: 0 3%;
            width: 94%;
            height: 10%;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 1000;
            background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
            border-radius: 3px;
            /* overflow: hidden; */
        }

        #isPause {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        #opts {
            display: flex;
            height: 100%;
            justify-content: space-between;
            align-items: center;
        }

        #orPlay,
        #fullScreen {
            height: 54%;
        }

        #opts img {
            height: 100%;
        }

        #progress {
            width: 66%;
            height: 10%;
            background-color: #FFF;
            border-radius: .3rem;
            position: relative;
            /* overflow: hidden; */
        }

        #progress:hover {
            height: 14%;
        }

        /* #progress:hover span {
            display: inline-block;
        }

        #progress div span {
            display: none;
            width: .8rem;
            height: .8rem;
            background: #F9A615;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        } */

        #progress div {
            display: inline-block;
            height: 100%;
            background: #F9A615;
            position: absolute;
            left: 0;
            top: 0;
            border-radius: .3rem;
        }

        #currenTime,
        #endTime {
            font-size: 1.2rem;
            color: #FFF;
        }
    </style>
    <link rel="stylesheet" href="./css/playVideo.css">
</head>

<body>
    <!-- 头部 -->
    <header class="header">
        <div class="container">
            <div class="Hleft">
                <a href="index.html">
                    <img src="./images/courseware/科学小伙伴@2x.png" alt="logo科学小伙伴">
                </a>
                <a href="javascript:;" id="hudongzujian">
                    <p class="personal"><span></span><strong>互动课件创作</strong></p>
                </a>
            </div>
        </div>
    </header>
    <div id="videoPlayer">
        <div id="player">
            <video style="z-index: 1;" id="video" preload="auto" autoplay="autoplay" poster>
                <source src="">
            </video>
            <div id="videoControls">
                <div id="opts">
                    <div id="orPlay">
                        <!-- 播放按钮 -->
                        <img src="./images/zanting.png">
                    </div>
                    <div id="currenTime">
                        <!-- 视频已播放的时间 -->
                        00:00
                    </div>
                    <div id="progress">
                        <!-- 视频进度条-->
                        <div>
                            <span></span>
                        </div>
                    </div>
                    <div id="endTime">
                        <!-- 视频总时长-->
                    </div>
                    <div id="fullScreen">
                        <!-- 全屏播放按钮 -->
                        <img src="./images/fullscreen.png">
                    </div>
                    <div id="cliVideo">
                        <!-- <img src="./images/fullscreenVIdeo/fenzhi.png">
                        <img class="curVideo" src="./images/fullscreenVIdeo/dingwei.png" alt=""> -->
                    </div>
                </div>
            </div>
            <!-- 互动视频组件 -->
            <div id="allComponent">
                <!-- 选项按钮组件 -->
                <div id="selComponent">
                    <p id="preSelA"></p>
                    <p id="preSelB"></p>
                    <p id="preSelC"></p>
                    <p id="preSelD"></p>
                </div>
                <!-- 画面暂停按钮组件 -->
                <div id="picStopBtn">
                    <div id="tierOne">
                        <div id="tierTwo">
                            <div id="tierThree">
                                <img src="./images/picstop.png" alt="picstop">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 标注组件 -->
                <div id="labelComponent">
                    <img draggable="false" src="./images/blackGround.jpg">
                </div>
            </div>
            <!-- <div id="isPause">   暂停时视频中心的按钮
                <img src="./images/bofang.png">
            </div> -->
        </div>
    </div>
    <div id="teachCourse">
        <video src="../互动视频测试/交流分享/暂停1.mp4" id="teachVideo" controls style="display:none;"></video>
    </div>
    <script src="./js/jquery-1.10.1.min.js"></script>
    <script src="./js/commonTool.js"></script>
    <script src="./js/playVideo.js"></script>
</body>
</html>